<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="shop-info-box">
					<view class="info-item flexWrapNo">
						<view class="flexWrapNo" style="flex: 1;">
							<view class="item-title">问题类型:</view>
							<picker @change="bindPickerChange" :value="index" :range="askArray" range-key="name">
								<view class="select-input">{{askArray[index].name}}</view>
							</picker>
						</view>
						<text class="icon-more"></text>
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">问题描述:</view>
						<textarea placeholder="请输入问题描述" placeholder-class="placeholderclass"></textarea>
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">上传图片:</view>
						<view class="attachment-box flexWrapNo">
							<view class="add-btn">
								
							</view>
							<image  @tap="previewImage(item,attachmentImg)" class="attachment-img" v-for="item in attachmentImg" :src="item"></image>
						</view>
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">上传视频:</view>
						<view class="attachment-box flexWrapNo">
							<view class="add-btn">
								
							</view>
							<image  @tap="previewImage(item,attachmentImg)" class="attachment-img" v-for="item in attachmentImg" :src="item"></image>
						</view>
					</view>
					<view class="remaks-box">
						备注：为了能快速定位问题，请至少上传图片或视频中的一种。
					</view>
				</view>
				<view class="explain-box">
					<view>工单说明：</view>
					<view>1、请详细描述问题现象，发生时间，具体位置等信息；</view>
					<view>2、请正确选择问题类型，以便我们尽快将工单反馈给相应的负责人；</view>
					<view>3、我们承诺工单会在24小时内受理；</view>
					<view>4、具体问题解决时间取决于问题难度，我们将尽全力为您排忧解难。</view>
					<view>5、常规问题在运营频道有解决方案，可先查阅“运营”频道内容。</view>
				</view>
				<view class="bottom-box flexWrapNo">
					<view class="define-btn">提交保存</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc: 0,
				askArray: [
					{
						name:'设备故障',
						id:1
					},
					{
						name:'球具损耗',
						id:2
					},
					{
						name:'软件BUG',
						id:2
					},
					{
						name:'需求反馈',
						id:2
					},
					{
						name:'美团\抖音问题',
						id:2
					},
					{
						name:'球具损耗',
						id:2
					},
					{
						name:'地图问题',
						id:2
					},
					{
						name:'开业活动',
						id:2
					},
					{
						name:'装修问题',
						id:2
					},
					{
						name:'其他',
						id:2
					}
				],
				index: 0,
				attachmentImg:['https://static.mo-yu.vip/uploads/20231009/29ba3650e72a139930a7865521cb4086.jpg']
			}
		},
		onLoad(ops) {
			
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 36upx;
		padding-bottom: 120upx;
		.shop-info-box {
			.info-item {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40upx;
				color: #FFFFFF;
				padding: 30upx 0;
				border-bottom: 1upx solid #36355E;
				picker{
					flex: 1;
				}
				.item-title{
					margin-right: 32upx;
					flex: none;
				}
				.attachment-box{
					.add-btn{
						width: 162rpx;
						height: 162rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 1upx solid  #36355E;
						position: relative;
						margin-right: 20upx;
						&::after{
							content: "";
							display: inline-block;
							width: 60upx;
							height: 2upx;
							background: #36355E;
							position: absolute;
							left: 0;
							right: 0;
							top: 0;
							bottom: 0;
							margin: auto;
						}
						&::before{
							content: "";
							display: inline-block;
							width: 2upx;
							height:60upx;
							background: #36355E;
							position: absolute;
							left: 0;
							right: 0;
							top: 0;
							bottom: 0;
							margin: auto;
						}
					}
					.attachment-img{
						width: 162rpx;
						height: 162rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						margin-right: 20upx;
						:nth-of-type(3n){
							margin-right: 0;
						}
					}
				}
				.small{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin:0 40upx;
				}
				.select-input{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}
				input {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}

				.icon-more {
					border-color: #FFFFFF;
				}

				.placeholderclass {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
				}
				textarea{
					background: #1D1C5C;
					border-radius: 16upx;
					padding: 30upx;
					height: 140upx;
				}
			}
			.remaks-box{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #82819B;
				line-height: 40rpx;
				padding-left: 158upx;
				margin-top: 12upx;
			}
		}
		.explain-box{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #9191A7;
			line-height: 48rpx;
			margin-top: 28upx;
		}
		.bottom-box{
			height: 120rpx;
			background: #1D1C5C;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			.define-btn{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				width: 322rpx;
				height: 80rpx;
				background: #26BCFD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				text-align: center;
			}
		}
	}
</style>
